<extend name="Public/layout" />

<block name="body">
    <style>
        .select2-container {
            z-index: inherit;
            margin-right: 5px;
        }

        .select2-container .select2-choice {
            margin-top: -2px;
            height: 30px;
        }

        .select2-results {
            --max-height: 400px;
        }

        .editor-row {
            margin: 0;
            padding: 5px 0;
            border: 1px solid #fff;
        }

        .editor-row:hover {
            background: #eee;
            border: 1px dashed #777;
        }

        .j_ds,
        .j_dd {
            font-size: 17px;
            margin: 0 5px;
            color: #777;
            cursor: pointer;
        }

        .j_ds:hover,
        .j_dd:hover {
            color: #000;
        }

        .j_db {
            margin: 5px 0;
        }

        .form-control {
            margin-right: 5px;
        }

        .select2-drop {
            z-index: 99999992
        }
    </style>
    <div class="row form-inline" style="margin-bottom:10px;">
        <div class="col-sm-12">
            <select id="j_c_s" style="width:300px;">
            <?php foreach($all as $v):?>
                <option value="{$v}" <?php if($id==$v){echo 'selected="selected"';}?>>{$v}</option>
            <?php endforeach;?>
        </select>
            <button id="j_c_a" class=" btn btn-flat btn-default" style="height:30px;line-height:0;">+ New CFG</button>
            <script>
                var goToCfgModel = function (id) { window.location.href = "<?php echo U('?id=xxx')?>".replace(/xxx/, id.replace(/\//, '|')); }
                $('#j_c_s').change(function () { goToCfgModel($(this).val()); }).select2();
                $('#j_c_a').click(function () { var name = prompt('输入新模型配置名称'); if (name) { goToCfgModel(name); } return false; });
            </script>
        </div>
    </div>

    <div id="j_cfg_editor" class="form-inline form-group-sm">
        <!-- JOIN TABLE 配置-->
        <div class="box box-success flat">
            <div class="box-header with-border">
                <h3 class="box-title">Join table</h3>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i> </button>
                </div>
            </div>
            <div class="box-body">
                <div class="j_cfg_editor_join_table" class="col-sm-12"> </div>
            </div>
        </div>

        <!-- 列表字段 配置-->
        <div class="box box-info flat">
            <div class="box-header with-border">
                <h3 class="box-title">列表按钮</h3>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i> </button>
                </div>
            </div>
            <div class="box-body">
                <div class="j_cfg_editor_list_button" class="col-sm-12"> </div>
                <a class="col-sm-12" href="https://fontawesome.com/icons?d=gallery" target="_blank">所有可用图标</a>
            </div>
        </div>

        <!-- 列表字段 配置-->
        <div class="box box-info flat">
            <div class="box-header with-border">
                <h3 class="box-title">列表字段</h3>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i> </button>
                </div>
            </div>
            <div class="box-body">
                <div class="j_cfg_editor_list_grid" class="col-sm-12"> </div>
            </div>
        </div>

        <!-- 列表操作 配置-->
        <div class="box box-info flat">
            <div class="box-header with-border">
                <h3 class="box-title">列表操作</h3>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i> </button>
                </div>
            </div>
            <div class="box-body">
                <div class="j_cfg_editor_list_opration" class="col-sm-12">
                </div>
            </div>
        </div>

        <!-- 列表操作 配置-->
        <div class="box box-danger flat">
            <div class="box-header with-border">
                <h3 class="box-title">表单字段</h3>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i> </button>
                </div>
            </div>
            <div class="box-body">
                <div class="j_cfg_editor_form_field" class="col-sm-12">
                </div>
            </div>
        </div>

        <!-- 列表操作 配置-->
        <div class="box box-danger flat" style="display:none;">
            <div class="box-header with-border">
                <h3 class="box-title">表单按钮</h3>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i> </button>
                </div>
            </div>
            <div class="box-body">
                <div class="j_cfg_editor_form_button" class="col-sm-12">
                </div>
            </div>
        </div>

        {:W('Dataform/run',[new stdClass(),[]])}
    </div>

    <script>
                // join table 编辑器
                var CFG_EDITOR_JOINTABLE = {
                    'add': function (rowValue) {
                        var select = this.editor.select('table', rowValue, tables).removeClass('form-control').css('width', '200');
                        setTimeout(function () {
                            select.select2().change(function () {
                                $(this).parent().find('[name="on"]').val($(this).val() + ".id = " + id.split('/')[0] + '.id');
                            });
                        }, 0);
                        return [
                            select,
                            this.editor.input('on', rowValue, 'on', '连表查询条件<br>table1.field1 = table2.field2').css('width', '300px')
                        ]
                    },
                };

                // list btn 编辑器
                var CFG_EDITOR_LISTBTN = {
                    'add': function (rowValue) {
                        return [
                            this.editor.select2('icon', rowValue, ['plus', 'trash-o', 'check', 'ban', 'download'], function (state) {
                                return "<i class='fa fa-" + state.id + "'/> " + state.id;
                            }),
                            this.editor.input('title', rowValue, '标题'),
                            this.editor.select('callback', rowValue, [
                                ['form', '表单(弹窗)'],
                                ['view', '详情(弹窗)'],
                                ['do', '异步操作'],
                                ['dels', '异步操作(确认)'],
                                ['link', '跳转'],
                                ['blank', '跳转(新窗口)'],
                                ['export', '导出 csv']
                            ]),
                            this.editor.input('url', rowValue, 'url', '变量使用中括号标记<br>view?[' + id + '.id]'),
                            this.editor.input('param', rowValue, 'JS回调参数'),
                            this.editor.input('key', rowValue, '按钮标识', '用于识别按钮<br>可在 model 中动态修改按钮属性'),
                        ];
                    }
                };

                // list grid 编辑器
                var CFG_EDITOR_LISTGRID = {
                    'add': function (rowValue) {
                        // var feildSelect = this.editor.selectField('field', rowValue, 'list_grid');
                        // feildSelect.change(function () {
                        //     getLable(feildSelect.val()) && fieldTitle.val(getLable(feildSelect.val()));
                        // });

                        var fieldTitle = this.editor.input('label', rowValue, '标题');

                        var select2Fields = [];
                        for (var table in fields) {
                            for (var i = 0; i < fields[table].length; i++) {
                                var val = table + '.' + fields[table][i];
                                select2Fields.push(val);
                            }
                        };

                        var query = function (query) {

                            var defalutIcons = [];
                            for (var i = 0; i < select2Fields.length; i++) {
                                defalutIcons.push({ 'id': select2Fields[i], 'text': select2Fields[i] });
                            }

                            var results = [];
                            if (query.term) {
                                for (var i = 0; i < select2Fields.length; i++) {
                                    if (select2Fields[i].indexOf(query.term) != -1) {
                                        results.push({ 'id': select2Fields[i], 'text': select2Fields[i] });
                                    }
                                }
                                var i = results.length;
                                for (var table in fields) {
                                    var tipOption = table + '.' + query.term;
                                    if (select2Fields.indexOf(tipOption) == -1) {
                                        results[i++] = { id: tipOption, text: tipOption };
                                    }
                                }
                            } else {
                                results = defalutIcons;
                            }
                            query.callback({ results: results });
                        };

                        if(rowValue['field']==undefined){
                            rowValue['field']=rowValue['name'];
                        }
                        var nameSelect = this.editor.select2('field', rowValue, select2Fields, undefined, query).css('width', 200);
                        //var nameTitle = this.editor.input('title', rowValue, '标题').css('width', 100);
                        nameSelect.change(function () {
                            getLable(nameSelect.val()) && nameSelect.next().val(getLable(nameSelect.val()));
                            $('#cfg_json_string').val(JSON.stringify(editor.get()));
                        });

                        return [
                            nameSelect,
                            fieldTitle,
                            this.editor.input('width', rowValue, '宽度', '每个字符宽度 : 15<br>时间宽度 : 150'),
                            this.editor.select('visiable', rowValue, [
                                ['0', '可以隐藏'],
                                ['1', '始终显示'],
                                ['-1', '隐藏'],
                            ]),
                            this.editor.select('sort', rowValue, [
                                ['1', '允许排序'],
                                ['0', '禁止排序'],
                                ['ASC', '默认排序(ASC)'],
                                ['DESC', '默认排序(DESC)']
                            ]),
                            this.editor.select('search', rowValue, [
                                ['2', '模糊搜索'],
                                ['1', '精确搜索'],
                                ['3', '时间区间搜索'],
                                ['0', '禁止搜索'],
                            ]),
                            this.editor.input('value_format', rowValue, '字典或回调函数', 'JSON 格式数据<br>{"1":"激活","0":"冻结"}<br>回调函数返回字符串时替换显示值<br>回调函数返回数组时作为字典<br><br>\
                            函数替换 [row] 替换为当前行, [member.uid] 替换为字段值<br>\
                            getDic([row],1,[member.uid])\
                            '),
                        ];
                    },
                };

                // list opration 编辑器
                var CFG_EDITOR_LISTOPT = {
                    'add': function (rowValue) {
                        rowValue = rowValue.label ? rowValue : { "url": "?[" + id.split('/')[0] + ".id]" };
                        return [
                            this.editor.input('label', rowValue, '标题'),
                            this.editor.select('type', rowValue, [
                                ['form', '表单(弹窗)'],
                                ['view', '详情(弹窗)'],
                                ['do', '异步操作'],
                                ['del', '异步操作(确认)'],
                                ['link', '跳转'],
                                ['blank', '跳转(新窗口)']
                            ]),
                            this.editor.input('url', rowValue, 'url', '变量使用中括号标记<br>view?[' + id + '.id]'),
                            this.editor.input('param', rowValue, 'JS回调参数'),
                            this.editor.input('key', rowValue, '按钮标识', '用于识别按钮<br>可在 model 中动态修改按钮属性'),
                        ];
                    }
                };

                // form field 编辑器
                var CFG_EDITOR_FORMFIELD = {
                    'add': function (rowValue) {
                        rowValue.group = rowValue.group || '基础';
                        rowValue.type = rowValue.type || 'text';
                        rowValue.is_show = rowValue.is_show || '1';

                        var select2Fields = [];
                        for (var table in fields) {
                            for (var i = 0; i < fields[table].length; i++) {
                                var val = table + '.' + fields[table][i];
                                select2Fields.push(val);
                            }
                        };

                        var query = function (query) {

                            var defalutIcons = [];
                            for (var i = 0; i < select2Fields.length; i++) {
                                defalutIcons.push({ 'id': select2Fields[i], 'text': select2Fields[i] });
                            }

                            var results = [];
                            if (query.term) {
                                for (var i = 0; i < select2Fields.length; i++) {
                                    if (select2Fields[i].indexOf(query.term) != -1) {
                                        results.push({ 'id': select2Fields[i], 'text': select2Fields[i] });
                                    }
                                }
                                var i = results.length;
                                for (var table in fields) {
                                    var tipOption = table + '.' + query.term;
                                    if (select2Fields.indexOf(tipOption) == -1) {
                                        results[i++] = { id: tipOption, text: tipOption };
                                    }
                                }
                            } else {
                                results = defalutIcons;
                            }
                            query.callback({ results: results });
                        };

                        var nameSelect = this.editor.select2('name', rowValue, select2Fields, undefined, query).css('width', 200);
                        var nameTitle = this.editor.input('title', rowValue, '标题').css('width', 100);
                        nameSelect.change(function () {
                            getLable(nameSelect.val()) && nameTitle.val(getLable(nameSelect.val()));
                            $('#cfg_json_string').val(JSON.stringify(editor.get()));
                        });

                        return [
                            this.editor.select2('group', rowValue, ['基础']).css('width', 80),
                            nameSelect,
                            nameTitle,
                            this.editor.select2('type', rowValue, [
                                'text',
                                'checkbox',
                                'radio',
                                'select',
                                'textarea',
                                'password',
                                'date',
                                'datetime',
                                'timestamp',
                                'picture',
                                'file',
                                'editor',
                                'hidden',
                                'location',
                                'grid',
                            ]),
                            this.editor.select('is_show', rowValue, [
                                ['all-show', '始终 显示'],
                                ['all-read', '始终 只读'],
                                ['add-show', '新增 显示'],
                                ['add-read', '新增 只读'],
                                ['edit-show', '编辑 显示'],
                                ['edit-read', '编辑 只读']
                            ]),
                            this.editor.input('rule', rowValue, '验证规则', '多个规则使用分号分隔<br>required - 必填<br>int - 整形<br>length=1,100 - 长度<br>date - 日期<br>datetime - 时间'),
                            this.editor.input('value_dic', rowValue, '字典或回调函数', '字典JSON或者回调函数<br>回调函数使用:开头,返回数组作为字典<br>:getDic(MEMBER)'),
                            this.editor.input('js', rowValue, '插件配置', 'JSON 格式'),
                            this.editor.input('remark', rowValue, '提示', '图片尺寸等提示信息'),
                        ];
                    }
                };

                var CFG_EDITOR_FORMFBTN = {
                    'add': function (rowValue) {
                        return [
                            this.editor.select2('icon', rowValue, ['plus', 'trash-o', 'check', 'ban', 'download'], function (state) {
                                return "<i class='fa fa-" + state.id + "'/> " + state.id;
                            }),
                            this.editor.input('title', rowValue, '标题'),
                            this.editor.select('callback', rowValue, [
                                ['form', '表单(弹窗)'],
                                ['view', '详情(弹窗)'],
                                ['do', '异步操作'],
                                ['confirm', '异步操作(确认)'],
                                ['link', '跳转'],
                                ['blank', '跳转(新窗口)'],
                                ['export', '导出 csv']
                            ]),
                            this.editor.input('url', rowValue, 'url', '变量使用中括号标记<br>view?[' + id + '.id]'),
                            this.editor.input('param', rowValue, 'JS回调参数'),
                            this.editor.input('key', rowValue, '按钮标识', '用于识别按钮<br>可在 model 中动态修改按钮属性'),
                        ];
                    }
                };

                // 配置编辑器
                var CFG_EDITOR = function (box, cfg, changeCallback) {
                    this.box = box;
                    this.cfg = cfg;
                    this.change = changeCallback;
                    for (var cfgKey in this.cfgTypeMap) {
                        this.initTypeEditor(cfgKey);
                    }
                };
                CFG_EDITOR.prototype = {
                    'cfgTypeMap': {
                        'join_table': CFG_EDITOR_JOINTABLE,
                        'list_button': CFG_EDITOR_LISTBTN,
                        'list_grid': CFG_EDITOR_LISTGRID,
                        'list_opration': CFG_EDITOR_LISTOPT,
                        'form_field': CFG_EDITOR_FORMFIELD,
                        'form_button': CFG_EDITOR_FORMFBTN,
                    },
                    'initTypeEditor': function (cfgKey) {
                        var context = this;
                        // 子表单对象, 含有 add 方法
                        var cfgTypeEditor = this.cfgTypeMap[cfgKey];
                        // 注入 cfg key
                        cfgTypeEditor.cfgKey = cfgKey;
                        // 注入编辑器实例
                        cfgTypeEditor.editor = this;
                        // 子表单配置
                        var cfgTypeValue = this.cfg[cfgKey] || [];
                        // 子表单容器
                        var box = $('.j_cfg_editor_' + cfgKey);
                        // 子表单添加按钮
                        var addButton = this.addButton(cfgTypeEditor);
                        // 注入 add button
                        cfgTypeEditor.addButton = addButton;
                        box.append(addButton);
                        // 初始化子表单数据
                        for (var i = 0; i < cfgTypeValue.length; i++) {
                            var row = this.row(cfgKey);
                            var fields = cfgTypeEditor.add(cfgTypeValue[i] || {});
                            for (var j = fields.length - 1; j > -1; j--) {
                                row.prepend(fields[j]);
                            }
                            addButton.before(row);
                        }
                        // dragsort
                        $('.j_cfg_editor_' + cfgKey).dragsort({
                            dragSelectorExclude: 'button',
                            dragSelector: '.j_ds',
                            dragSelectorExclude: 'select,input',
                            placeHolderTemplate: '<div class="row editor-row col-sm-12" style="height:20px;width:100%;border:1px dashed #000000;"></div>',
                            dragEnd: function () {
                                context.change();
                            }
                        });
                    },
                    // 创建行元素, 支持排序和删除
                    'row': function (type) {
                        var context = this;
                        var row = $('<div class="row editor-row col-sm-12">').attr('type', type);
                        var drag = $('<i class="fa fa-reorder j_ds"></i>');
                        var del = $('<i class="fa fa-trash-o j_dd"></i>');
                        var add = $('<i class="fa fa-plus j_dd"></i>');
                        del.click(function () {
                            $(this).parent().remove();
                            context.change();
                        });
                        add.click( function(e){
                            context.tg = this;
                            $( this ).parents( "div.box-body" ).find( "button.btn-default" ).click();
                        } )
                        return row.append(drag, del, add);
                    },
                    // 创建新增按钮
                    'addButton': function (o) {
                        var context = this;
                        var addButton = $('<button class="j_db btn btn-flat btn-default">').text('+ New Line').click(function () {
                            var row = context.row(o.cfgKey);
                            var fields = o.add({});
                            for (var i = fields.length - 1; i > -1; i--) {
                                row.prepend(fields[i]);
                            }
                            if( context.tg ){
                                $( context.tg ).closest( "div.row" ).after( row );
                                context.tg = null
                            }
                            else{
                                o.addButton.before(row);
                            }
                        });
                        return $('<div class="col-sm-12"></div>').append(addButton);
                    },
                    // 创建 input 元素
                    'input': function (name, rowValue, placeholder, tip) {
                        var context = this;
                        if (rowValue[name] && typeof rowValue[name] == 'object') {
                            rowValue[name] = JSON.stringify(rowValue[name]);
                        }

                        var input = $('<input name="' + name + '" class="form-control">').change(function () {
                            context.change();
                        }).val(rowValue[name] || '').attr('placeholder', placeholder || name).attr('title', tip);

                        input.keypress(function (event) {
                            if (event.keyCode == "13") {
                                context.save();
                            }
                        });

                        input.keyup(function (event) {
                            context.change();
                        });

                        setTimeout(function () {
                            input.poshytip({
                                className: 'tip-yellowsimple',
                                showOn: 'hover',
                                alignTo: 'target',
                                alignX: 'inner-left',
                                offsetX: 0,
                                offsetY: 5,
                                showTimeout: 10,
                                fade: false,
                                slide: false
                            });
                        }, 0);

                        return input;
                    },
                    // 创建 select 元素
                    'select': function (name, rowValue, options) {
                        var context = this;
                        var select = $('<select class="form-control">').attr('name', name);
                        for (var i = 0; i < options.length; i++) {
                            var x = options[i][0];
                            var el = $('<option>').val(x).text(options[i][1]);
                            el.attr('selected', rowValue[name] == x ? 'selected' : false);
                            select.append(el);
                        }
                        return select.change(function () {
                            context.change();
                        });
                    },
                    // 创建可编辑的 select 选择元素
                    'select2': function (name, rowValue, options, format, queryCallback) {
                        var select = this.input(name, rowValue, '').css('width', '120px').attr('type', 'hidden').removeClass('form-control');

                        var query = function (query) {

                            var defalutIcons = [];
                            for (var i = 0; i < options.length; i++) {
                                defalutIcons.push({ 'id': options[i], 'text': options[i] });
                            }

                            var results = [];
                            if (query.term) {
                                for (var i = 0; i < options.length; i++) {
                                    if (options[i].indexOf(query.term) != -1) {
                                        results.push({ 'id': options[i], 'text': options[i] });
                                    }
                                }
                                results[results.length] = { id: query.term, text: query.term };
                            } else {
                                results = defalutIcons;
                            }
                            query.callback({ results: results });
                        };
                        setTimeout(function () {
                            select.select2({
                                formatResult: format || undefined,
                                formatSelection: format || undefined,
                                query: queryCallback || query,
                                escapeMarkup: function (m) { return m; },
                                initSelection: function (element, callback) {
                                    callback({ 'id': $(element).val(), 'text': $(element).val() });
                                },
                            });
                        }, 0);
                        return select;
                    },
                    // 创建 filed select 选择元素
                    'selectField': function (name, rowValue, editorId) {
                        var select = this.select(name, rowValue, '').css('width', '150px').removeClass('form-control').addClass('j_f_s').attr('data-editor', '.j_cfg_editor_' + editorId);
                        var html = '';
                        var value, s;

                        if (!rowValue[name]) {
                            var selectedValues = [];
                            $('.j_f_s').each(function () {
                                selectedValues.push($(this).val());
                            });
                            for (var table in fields) {
                                for (var i = 0; i < fields[table].length; i++) {
                                    var val = table + '.' + fields[table][i];
                                    if (selectedValues.indexOf(val) === -1 && !rowValue[name]) {
                                        rowValue[name] = val;
                                    }
                                }
                            }
                        }

                        for (var table in fields) {
                            html += '<optgroup label="' + table + '">';
                            for (var i = 0; i < fields[table].length; i++) {
                                value = table + '.' + fields[table][i];
                                s = value == rowValue[name] ? "selected='selected'" : false;
                                html += '<option value="' + value + '" ' + s + '>' + fields[table][i] + '</option>';
                            }
                            html += '<optgroup>';
                        }
                        select.html(html);
                        var reset = function () {
                            var selectedValues = [];
                            var editor = $(this).attr('data-editor');
                            $(editor).find('.j_f_s').each(function () {
                                selectedValues.push($(this).val());
                            }).each(function () {
                                var sVal = $(this).val();
                                $(this).find('option').each(function () {
                                    var oVal = $(this).val();
                                    $(this).attr('disabled', selectedValues.indexOf(oVal) !== -1 && oVal !== sVal ? 'disabled' : false);
                                });
                            });
                        };
                        select.change(reset);
                        setTimeout(function () {
                            select.select2({});
                            reset.apply(select);
                        }, 0);
                        return select;
                    },
                    // 获取编辑器中的配置 JSON
                    'get': function () {
                        var cfg = {};
                        this.box.find('.editor-row').each(function () {
                            var rowType = $(this).attr('type');
                            var rowCfg = {};
                            var rowCfgStatus = false;
                            $(this).find('input,select').each(function () {
                                var name = $(this).attr('name');
                                var value = $.trim($(this).val());

                                if (!name) {
                                    return;
                                }

                                if (value) {
                                    rowCfgStatus = true;
                                }

                                // 尝试修复 json 格式数据
                                try {
                                    if (value.slice(0, 1) == '[' || value.slice(0, 1) == '{') {
                                        eval("value=" + value + ';');
                                    }
                                } catch (e) { }

                                rowCfg[$(this).attr('name')] = value;;
                            });
                            if (rowCfgStatus) {
                                cfg[rowType] = cfg[rowType] || [];
                                cfg[rowType].push(rowCfg);
                            }
                        });
                        return cfg;
                    },
                    'save': function () {
                        this.change();
                        $.post(form.attr('action'), form.serialize(), function (info) {
                            popup.tip(info.info);
                        }, 'json');
                    }
                };
    </script>
    <script>
                var cfg = <?php echo json_encode($cfgJosn);?>;
                var id = '<?php echo $id;?>';
                var fields = <?php echo json_encode($fields);?>;
                var fieldDetails = <?php echo json_encode($fieldDetails);?>;
                var tables = <?php echo json_encode($tables);?>;

                var getLable = function (fieldName) {
                    var fn = fieldName.split('.');
                    var table = fn[0];
                    var name = fn[1];
                    if (!fieldDetails[table]) {
                        return '';
                    }
                    for (var i = 0; i < fieldDetails[table].length; i++) {
                        if (name == fieldDetails[table][i].COLUMN_NAME) {
                            return fieldDetails[table][i].column_comment
                        }
                    }
                    return '';
                }

                try {
                    var isNew = true;
                    var f;
                    for (var x in cfg) {
                        if (cfg[x] && cfg[x].length) {
                            isNew = false;
                        }
                    }
                    if (isNew) {
                        cfg.list_grid = [];
                        cfg.form_field = [];
                        for (var i = 0; i < fields[id].length; i++) {
                            f = id + '.' + fields[id][i];
                            cfg.list_grid.push({ 'name': f, 'label': getLable(f) });
                            cfg.form_field.push({ 'name': f, 'title': getLable(f) });
                        }
                    }
                } catch (e) {
                    console.error(e)
                }

                var editor = new CFG_EDITOR($('#j_cfg_editor'), cfg, function () {
                    $('#cfg_json_string').val(JSON.stringify(editor.get()));
                });
                var form = $('#j_cfg_editor form');
                form.append(
                    $('<input type="hidden" name="id" value="<?php echo $id?>">'), $('<input type="hidden" id="cfg_json_string" name="cfg_json_string" value="" />')
                );
                $('#cfg_json_string').val(JSON.stringify(editor.get()));
    </script>
</block>